<template>
  <view class="c-loading" v-if="loading" :style="{ height: $rpxunit(height) }">
    <!-- <c-icon icon="icon-icon_loding_24" :isOpenPattern="isOpenPattern" :size="size"></c-icon> -->
    <!-- <image :style="{width:$rpxunit(size),height:$rpxunit(size)}" :src="loding" mode=""></image> -->
    <uni-transition
      ref="ani"
      custom-class="transition"
      mode-class="fade"
      :styles="styles"
      :show="loading"
    >
      <view
        :style="{ width: $rpxunit(size), height: $rpxunit(size) }"
        class="loading1"
      ></view>
    </uni-transition>
    <view
      class=""
      v-if="loadingText"
      style="margin-top: 10rpx"
      :style="{ fontSize }"
    >
      {{ loadingText }}
    </view>
  </view>
</template>

<script setup lang="ts">
import propsMixin from "../mixins/props/index";
import { computed, defineProps, getCurrentInstance, reactive, toRefs } from "vue";
const {proxy} = getCurrentInstance() as any;
const props = defineProps({
  ...propsMixin.props,
  size: {
    type: [String, Number],
    default: "80rpx",
  },
  loadingText: {
    type: String,
    default: "",
  },
  height: {
    type: [String, Number],
    default: "",
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  styles: {},
});
const { styles } = toRefs(state);
const $rpxunit = proxy.$rpxunit;
const fontSize = computed(() => {
  return parseInt(props.size as string) / 4 + "rpx";
});
</script>

<style lang="scss" scoped>
.c-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* vertical-align: middle; */
}

.loading1 {
  width: 80rpx;
  height: 80rpx;
  border: 5rpx solid #cccccc;
  border-top-color: transparent;
  border-radius: 100%;
  animation: circle1 infinite 0.75s linear;
}
@keyframes circle1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>